<template>
<div class="tc-right">
    <div class="tc-righttop-tab j-tc-righttop-tab">
        <ul class="RTtab clearfix">
            <li class="visitTab-btn fl RTtab-active2" style="background:#f33;">
                <a :href="dynamicHref" target="_blank">客户端</a>
            </li>
            <!-- <li class="visitTab-btn RTtab-active2 fl">设计回访</li> -->
            <!-- <li class="visitTab-btn RTtab-active3 fl">客户回访</li> -->
            <!-- <li class="list-btn RTtab-active fl">其他按钮</li>-->
            <li class="list-btn RTtab-active fr">
                <router-link :to="routerPath('list')">列表</router-link>
            </li>
        </ul>
    </div>
    <div class="tc-right-top clearfix">
        <div class="fl needdealt">
            <!-- <ul>
                <li class="bgRed">待办一</li>
                <li class="bgOrange">待办二</li>
                <li class="bgGreen">待办三</li>
            </ul> -->
        </div>
        <div class="visitbox">
            <!-- 回访内容 #j-visit 是一个整体内容 切换列子看 Index/Right-->
            <div class="visit" id="j-visit" v-scrollHeight="250">
                <div v-if="returnVisitList!=null && returnVisitList.length>0">
                    <div v-for="(item, index) in returnVisitList" :key="index">
                        <div class="visi-list tx-left" v-if="item.logType == 1 | item.logType == 3 ">
                            <div class="visi-listtop">
                                <span class="visi-name">地</span>
                                <span class="visi-date">{{Number(item.logType) === 1 ? '地监'+item.creatorUserName : '地工'+item.creatorUserName}}</span>
                                <span class="visi-date">{{ item.createTime }}</span>
                                <span class="visi-date" v-html="item.oldLogType !== null ? item.exceptionContent : require('js-base64').Base64.decode(item.exceptionContent)"></span>
                            </div>
                            <p :class="Number(item.exceptionType) | worklog_cont_color ">{{item.content===''?'--':item.content}}</p>
                        </div>
                        <div class="visi-list tx-right" v-else>
                            <div class="visi-listtop">
                                <span class="visi-date" v-html="item.oldLogType !== null ? item.exceptionContent : require('js-base64').Base64.decode(item.exceptionContent)"></span>
                                <span class="noteslist-span ml5">{{item.createTime}}</span>
                                <span class="c999999 ml5 mr5">{{item.creatorUserName}}</span>
                                <span class="cRed">{{item.logType | roleType}}</span>
                                <span class="visi-name">集</span>
                            </div>
                            <p :class="Number(item.exceptionType) | worklog_cont_color">{{item.content===''?'--':item.content}}</p>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <img src="https://pa.rxjy.com/abc/static/images/empty.png">
                </div>
            </div>
        </div>
    </div>
    <div class="tc-right-bottom pa10 relative">
        <div class="tc-right-bottom-left relative" style="margin-right:0px">
            <div class="clearfix">
                <ul class="topdaily fl">
                    <li v-for="(item, index) in title" :key="index">
                        <a :class="['topdailybtn', currentIndex === index ? 'active' : '']" href="javascript:" @click="getVisitDiv(index)">{{item}}</a>
                    </li>
                </ul>
                <ul class="fr RTtab">
                    <li class="RTtab-active" v-if="isShow && userInfo.as_diquId === 39"  @click="getSupervisionList()">监理变更</li>
                    <router-link :to="{path: routerPath('fineProject')}" tag='li' class="RTtab-active">
                        <span>项经罚款</span>
                    </router-link>
                </ul>
             </div>
            <div class="dailyrgt-divZi" v-if="!isShowVisit">
                <p class="tx-center cRed tx-fb fz14">工程质量， 施工进度， 安全形象， 环境卫生， 材料质量， 款项回收， 摄像头问题， 资料问题</p>
            </div>
            <div class="visitText clearfix" v-if="isShowVisit">
                <el-input
                    resize='none'
                    type="textarea"
                    :placeholder="placeholderValue"
                    v-model="visitText">
                </el-input>
                <input type="button" class="uiBtn-normal uiBtn-blue mt10" value="确定" @click="savePublicWorkOrderLog()" @keyup.enter="savePublicWorkOrderLog()">
            </div>
        </div>

        <!-- <div class="EventpenaltyDiv">
            <a href="javascrpit:;" class="EventpenaltyBtn">事件平台</a>
            <a href="javascrpit:;" class="EventpenaltyBtn">平台</a>
        </div> -->
        <el-dialog
            title="监理变更"
            append-to-body
            :visible.sync="dialogVisible"
            width="400px"
        >
            <div class="pl10">
                <div class="mb10">
                    <label class="pr10">原监理姓名</label>
                    <span>{{this.leftInfo.supervisor_username}}</span>
                </div>
                <div>
                    <label class="pr20">监理姓名</label>
                    <el-select v-model="superName" placeholder="请选择监理">
                        <el-option
                            v-for="item in superList"
                            :key="item.u_xingming"
                            :label="item.u_xingming"
                            :value="item.u_xingming">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="superSubmit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <!-- 三段渲染容器 -->
    <transition class="animated faster" enter-active-class="animated faster slideInLeft" leave-active-class="animated faster slideOutLeft">
        <router-view></router-view>
    </transition>
</div>
</template>
<script>
import { Base64 } from 'js-base64'
import { mapGetters, mapMutations } from 'vuex'
import { getReturnVisit, getProjectStatus, getCustomerLoginEncrypt, savePublicWorkOrderLog, chooseSupervision, getSupervisionList, saveReturnVisit } from '../../../project/dynamicProject/Resources/Api/index'
export default {
    name: '',
    components: {

    },
    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.load()
    },
    data () {
        return {
            placeholderValue: '', // 回访Value
            isShow: true, // 监理变更是否显示
            title: ['正常', '异常', '问题'],
            returnVisitList: [], // 回访列表
            dynamicHref: '', // 客户端链接
            currentIndex: -1, // 当前项目的Index
            isShowVisit: false, // 是否显示回访窗口
            visitText: '', // 回访内容
            dialogVisible: false, // 弹框
            superList: [],
            superName: '' // 监理名称
        }
    },
    methods: {
        ...mapMutations({
            setLeftData: `SET_LEFT_INFO`
        }),
        getCookie (name) {
            let arr = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
            let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
            if ((arr = document.cookie.match(reg))) { return unescape(arr[2]) } else { return null }
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 监理列表
        getSupervisionList () {
            this.dialogVisible = true
            let parms = {
                areaId: this.leftInfo.areaid,
                orderNo: this.leftInfo.orderno
            }
            getSupervisionList(parms).then((result) => {
                if (result.data.StatusCode === 1) {
                    this.superList = result.data.Body.supervisionList
                }
            }).catch((error) => {
                console.log(error)
            })
        },
        // 监理变更
        superSubmit () {
            if (this.superName === '') {
                this.$message({
                    type: 'info',
                    message: '请选择监理'
                })
            } else {
                const current = this.superList.filter((item) => { return item.u_xingming === this.superName })
                let parms = {
                    orderNo: this.leftInfo.orderno,
                    supervisorUserno: current[0].u_kahao,
                    supervisorUsername: this.superName
                }
                chooseSupervision(parms).then((result) => {
                    this.$message({
                        type: 'success',
                        message: '监理变更成功'
                    })
                    const currentLeftInfo = this.leftInfo
                    this.setLeftData({
                        ...currentLeftInfo,
                        supervisor_username: this.superName
                    })
                    this.dialogVisible = false
                }).catch((error) => {
                    console.log(error)
                })
            }
        },
        load () {
            // 用_this 代替this
            let _this = this
            _this.loading = true
            // 接口请求项目信息
            let parm = {
                orderNo: _this.leftInfo.orderno
            }
            // 获取回访数据
            getReturnVisit(parm).then((result) => {
                if (result.data.StatusCode === 1) {
                    _this.returnVisitList = result.data.Body
                    this.scrollToBottom()
                }
            }).catch((err) => {
                console.log(err)
            })
            // 获取客户端接口相关数据
            // 接口信息
            // let parameter = {
            //     areaId: _this.leftInfo.areaid,
            //     orderNo: _this.leftInfo.orderno,
            //     userNo: this.userInfo.as_cardNo ? this.userInfo.as_cardNo : '01015505'
            // }
            // 登陆信息(老客户端)
            // getClientLoginInformation(parameter).then((result) => {
            //     if (result.data.StatusCode === 1) {
            //         const CusData = result.data.Body
            //         console.log(CusData)
            //         this.dynamicHref = `https://vip.wenes.cn/index.php?m=member&c=khd&a=khdlogin&peolpe=${CusData.peolpe}&cardNo=${CusData.cardNo}&rwdid=${CusData.rwdid}&cityid=${CusData.cityid}&nickname=${CusData.nickname}&type=3&cityName=${CusData.cityName}`
            //     }
            // }).catch((err) => {
            //     console.log(err)
            // })
            // 登陆客户端(新客户端)
            // 获取设计师卡号
            let parame = {
                orderNo: _this.leftInfo.orderno
            }
            // 客户端登陆jwt
            getProjectStatus(parame).then((result) => {
                if (result.data.StatusCode === 1) {
                    const data = result.data.Body.personInfo
                    if (data) {
                        let param = {
                            rwdId: _this.leftInfo.orderno,
                            cardNo: data.designerNo,
                            nickname: data.emName,
                            type: 4
                        }
                        getCustomerLoginEncrypt(param).then((result) => {
                            if (result.data.StatusCode === 0) {
                                this.dynamicHref = `https://vip.wenes.cn/#/Login?jwt=${result.data.StatusMsg}`
                                // this.dynamicHref = `http://localhost:8082/#/Login?jwt=${result.data.StatusMsg}`
                            }
                        }).catch((err) => {
                            console.log(err)
                        })
                    }
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        // 默认到底部
        scrollToBottom () {
            this.$nextTick(() => {
                var container = this.$el.querySelector('.visit')
                container.scrollTop = container.scrollHeight
            })
        },
        // tab 切换
        getVisitDiv (index) {
            this.currentIndex = index
            this.isShowVisit = true
            switch (Number(index)) {
            case 0:
                this.placeholderValue = '1.根据系统监理巡检内容，材料配送情况、资料上传情况，监理回访对项目做出评估是否为正常？2.如出现工期、资料、款项、质量、现场、人工、材料异常、异常变更，在系统异常中做回访。3.如出现司法、纠纷、停工、事故、退单问题在系统问题中做回访。'
                break
            case 1:
                this.placeholderValue = '1.问题原因，解决方案，解决的时间截点。2.相关责任的人的处理'
                break
            case 2:
                this.placeholderValue = '1.问题原因，落实相关责任人，解决预案。2.每日回访解决问题的进展'
                break
            default:
                break
            }
        },
        // 提交回访
        savePublicWorkOrderLog () {
            // 用_this 代替this
            let _this = this
            if (this.visitText === '') {
                this.$message('回访内容不能为空')
                return false
            }
            let logType = 1
            if (this.userInfo.as_diquId === 39) {
                logType = 5
            } else {
                logType = 1
            }
            let exceptionContent = ''
            if (this.currentIndex === 0) {
                exceptionContent = Base64.encode("<span class='cGreen' pr8>正常</span>")
            } else if (this.currentIndex === 1) {
                exceptionContent = Base64.encode("<span class='cOrange' pr8>异常</span>")
            } else if (this.currentIndex === 2) {
                exceptionContent = Base64.encode("<span class='cRed' pr8>问题</span>")
            }
            // 接口请求项目信息
            let parm = {
                orderNo: _this.leftInfo.orderno,
                logType: logType,
                exceptionType: this.currentIndex + 1,
                exceptionContent: exceptionContent,
                content: this.visitText,
                remark: '',
                creatorUserNo: this.userInfo.as_cardNo,
                creatorUserName: this.userInfo.as_fullName,
                areaId: this.userInfo.as_diquId
            }
            // 保存回访数据
            savePublicWorkOrderLog(parm).then((result) => {
                if (result.data.StatusCode === 1) {
                    let role
                    // 集团登录
                    if (Number(_this.userInfo.as_diquId) === 39) {
                        role = 10
                    } else {
                        const userLevel = this.userInfo.as_level
                        if (userLevel.length > 0) {
                            userLevel.forEach(ele => {
                                if (Number(ele) === 82 || Number(ele) === 83) {
                                    role = 30
                                } else if (Number(ele) === 47 || Number(ele) === 583) {
                                    role = 20
                                } else {
                                    role = 0
                                }
                            })
                        }
                    }
                    // 保存回访记录
                    let param = {
                        orderNo: _this.leftInfo.orderno,
                        userNo: this.userInfo.as_cardNo,
                        role: role,
                        content: this.visitText,
                        status: this.currentIndex
                    }
                    saveReturnVisit(param).then((result) => {
                        if (result.data.StatusCode === 1) {
                            this.load()
                            this.$message('回访提交成功')
                            this.currentIndex = -1
                            this.visitText = '' // 回访内容
                            this.isShowVisit = false
                        }
                    }).catch((err) => {
                        console.log(err)
                    })
                }
            }).catch((err) => {
                console.log(err)
            })
        }
    },
    watch: {
        leftInfo () {
            this.currentIndex = -1
            this.visitText = '' // 回访内容
            this.isShowVisit = false
            this.load()
        }
    },
    filters: {
        roleType (i) {
            let str
            switch (Number(i)) {
            case 2 :
                str = '客服'
                break
            case 4:
                str = '监理'
                break
            case 5:
                str = '工程经理'
                break
            default:
                str = ''
                break
            }
            return str
        },
        worklog_cont_color (i) {
            let str
            switch (Number(i)) {
            case 1 :
                str = 'visi-listtxt'
                break
            case 2:
                str = 'visi-listtxt cOrange'
                break
            case 3:
                str = 'visi-listtxt cRed'
                break
            default:
                str = 'visi-listtxt'
                break
            }
            return str
        }
    }
}
</script>
<style lang="scss">
    .visitText {
        textarea {
            width: 100%;
            height: 150px;
            border: none;
        }
        input {
            display: block;
            margin: 10px auto 0;
        }
    }
</style>
